<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@page contentType="text/html;charset=UTF-8"
	import="com.srit.forecast.constant.Constant"%>
<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="srit-tag" uri="/srit-constant-tag"%>
<srit-tag:Constant var="PAGE_TYPE_FORM" />
<srit-tag:Constant var="PAGE_TYPE_LIST" />
<srit-tag:Constant var="PAGE_TYPE_ALL" />
<html>
<head>
<title></title>
<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet"
	type="text/css">
<link href="<c:url value="/resources/css/list_css.css" />"
	rel="stylesheet" type="text/css">
<link href="<c:url value="/resources/css/autocomplete.css" />"
	rel="stylesheet" type="text/css">
<script src="<c:url value="/resources/js/jquery-1.8.0.min.js" />"></script>
<script src="<c:url value="/resources/views/multiSelect.js" />"></script>
<script>
	$(function() {
		var optionToTr = function(optionArray) {
			var arr = [];
			var tr = function(jObj) {
				var text = jObj.text();
				var value = jObj.val();
				$clone = $("#relTable tr.clone_row").clone();
				$clone.css("display", "");
				$clone.removeClass("clone_row");

				$clone.find("td:eq(0)").html(text).append(
						$("<input type=\"hidden\" value="+value+">"))
				return $clone;
			}
			$.each(optionArray, function(i, el) {
				arr.push(tr($(el)));
			})
			return $(arr);
		}
		var trToOption = function(trArray) {
			var arr = [];
			var option = function(jObj) {
				var firstTd = jObj.find("td:eq(0)");
				var text = firstTd.text();
				var value = firstTd.find("input").val();
				console.log(text);
				return $("<option value="+value+">" + text + "</option>");
			}
			$.each(trArray, function(i, el) {
				arr.push(option($(el)));
			})
			return $(arr);
		}
		var refleshTable = function() {
			initTr();
			$.each($("#relTable tr:gt(1)"), function(i, el) {
				var attrValue = "relList[" + i + "]";
				$(el).find("input").each(function() {
					//console.log($(el).find("input").index(this))
					switch ($(el).find("input").index(this)) {
					case 0:
						$(this).attr("name", attrValue + ".pageConfigId");
						break;
					case 1:
						$(this).attr("name", attrValue + ".name");
						break;
					default:
						break;
					}
				});
			});
		}

		function initTr() {
			$("#relTable tr").unbind("click").click(function() {
				$(this).toggleClass("selected");
			});
		}

		function initTableAndSelect() {
			$.each($("#relTable tr:gt(1)"),function (i,el){
				var $hasSelect=$("#pageConfigList").find("option[value="+$(el).find("input:hidden").val()+"]");
				$(el).find("td:eq(0)").append($hasSelect.text());
				$hasSelect.remove();
			});
		}
		initSelectToTable(optionToTr, trToOption, refleshTable);
		initTr();
		initTableAndSelect();
	});
</script>


</head>
<!-- 搜索 -->
<c:if test="${pageType==PAGE_TYPE_ALL}">
	<div id="SearchDiv"></div>
</c:if>

<!-- 列表页 -->
<c:if test="${pageType==PAGE_TYPE_LIST||pageType==PAGE_TYPE_ALL}">
	<div id="pageDiv">
		<table class="menu-pare" align='center' width="98%"
			style="text-align: right">
			<tr>
				<td><a href="<c:url  value="/reportConfig-form"></c:url>">创建</a></td>
			</tr>
		</table>

		<table class="sritTable listTable" align='center' id="table"
			width="98%" style="margin-top: 5px">
			<tr>
				<th><input type="checkbox" /></th>
				<th>ID</th>
				<th>TYPE</th>
				<th>ENABLED</th>
				<th>排序</th>
				<th>操作</th>
			</tr>
			<c:forEach var="bean" items="${page.list}">
				<tr onMouseOver="javascript:this.style.backgroundColor='#AABBFF';"
					onMouseOut="javascript:this.style.backgroundColor='#FFFFFF';"
					ondblclick="javascript:window.location='<c:url  value="/reportConfig-edit">
					<c:param name="id" value="${bean.id }"/>
					</c:url>'">
					<td><input type="checkbox" value="${bean.id }" /></td>
					<td>${bean.id }</td>
					<td>${bean.name }</td>
					<td>${bean.enabled }</td>
					<td>${bean.orderNo}</td>
					<td></td>
				</tr>
			</c:forEach>
		</table>

		<table class="sritTable" align='center' id="table" width="98%"
			style="margin-top: 0px">
			<tr>
				<td class="td_tl">${page.count},${page.pageNum}</td>
			</tr>
		</table>
	</div>
</c:if>

<!-- 表单页 -->
<c:if test="${pageType==PAGE_TYPE_FORM||pageType==PAGE_TYPE_ALL}">
	<div id="createDiv">
		<table class="menu-pare" align='center' width="98%"
			style="text-align: right">
			<tr>
				<td><a href="<c:url  value="/reportConfig-search"></c:url>">返回</a></td>
			</tr>
		</table>

		<form:form modelAttribute="reportConfig"
			action="/reportConfig-saveOrUpdate" method="post">
			<form:hidden path="id" />
			<table class="sritTable" align='center' id="table" width="98%">
				<tr>
					<th colspan="6">报文配置</th>
				</tr>
				<tr>
					<td class="td_tl">名称</td>
					<td><form:input path="name" /></td>
					<td class="td_tl">排序</td>
					<td><form:input path="orderNo" /></td>
					<td class="td_tl">启用</td>
					<td><label><form:radiobutton path="enabled" value="Y" />是</label>
						<label><form:radiobutton path="enabled" value="N" />否</label></td>
				</tr>
				<tr>
					<td colspan="6">
						<div style="width: 40%; height: 100%; float: left">
							<table class="innerTable" width="100%">
								<tr>
									<th>PageConfigList</th>
								</tr>
								<tr>
									<td style="height: 100px"><select id="pageConfigList"
										multiple="multiple" style="width: 100%; height: 100%">
											<c:forEach items="${pageConfigList}" var="bean">
												<option value="${bean.id }">${bean.name
													}(页面：${bean.pageValue}，备注：${bean.remark })</option>
											</c:forEach>
									</select></td>
								</tr>
							</table>
						</div>

						<div
							style="width: 20px; height: 100px; float: left; vertical-align: middle; text-align: center">
							<div class="multSelectDiv" fromSelect="pageConfigList"
								toSelect="relTable">
								<div>
									<a href="javascript:void(0)"><span>&gt;</span></a>
								</div>
								<div>
									<a href="javascript:void(0)"><span>&gt;&gt;</span></a>
								</div>
								<div>
									<a href="javascript:void(0)"><span>&lt;&lt;</span></a>
								</div>
								<div>
									<a href="javascript:void(0)"><span>&lt;</span></a>
								</div>
							</div>
						</div>
						<div style="width: 40%; height: 100%; float: left">
							<select id="reportPageRelList" multiple="multiple"
								style="width: 100%; height: 100%; display: none">
							</select>
							<table id="relTable" class="multTable" width="100%"
								style="text-align: center">
								<tr>
									<th>PageConfig</th>
									<th>NAME</th>
								</tr>
								<tr class="clone_row" style="display: none">
									<td></td>
									<td><input type="text" /></td>
								</tr>
								<c:forEach items="${reportConfig.relList}" var="rel"
									varStatus="status">
									<tr>
										<td><input type="hidden" value="${rel.pageConfigId}" name="relList[${status.count-1}].pageConfigId"></td>
										<td><input type="text" value="${rel.name }" name="relList[${status.count-1}].name" /></td>
									</tr>
								</c:forEach>
							</table>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="6" class="td_tl"><c:if
							test="${reportConfig.id==null}">
							<input type="submit" value="保存" />
						</c:if> <c:if test="${reportConfig.id!=null }">
							<input type="submit" value="修改" />
						</c:if> <input type="reset" /></td>
				</tr>
			</table>
		</form:form>

	</div>
</c:if>


</html>




